<template>
    <div class="box-column container-grid">
        <div class="box-row box-center-start info-el" style="display:flex;justify-content: space-between;">
            <div>园区名称：{{ infoData.yard_name }}&emsp;&emsp;&emsp;地址：{{ infoData.yard_addr}}</div>
            <div>
                <el-button icon="el-icon-back" class="btn-blue" @click="go('parkTable')" >
                    返回
                </el-button> 
            </div>
        </div>
        <ux-header-search
            ref="searchHeader"
            v-bind="enquiryData"
            :btnsData="{ permissionsData }"
            @search="onQueryClick"
        ></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid
                v-bind="tableConfig"
                :data="dataStore.data"
                :columns="table.columns"
            >
                <template v-slot:operate="{ row }">
                    <ux-btn-group
                        :btns="table.btns"
                        :data="{ row, permissionsData }"
                    ></ux-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page"
                :page-size="dataStore.proxy.pageSize"
                :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total"
                :layout="'total, sizes, prev, pager, next, jumper'"
            ></el-pagination>
        </div>
        <dialogForm ref="dialogForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></dialogForm>
        <doorTraffic ref="doorTraffic" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></doorTraffic>
</template>

<script  lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, State } from 'vuex-class';
import { mixinTableStore } from '@/mixin/table/Store';
import { mixinTableHeader } from '@/mixin/table/Header';
import { mixinTableOperation } from '@/mixin/table/Operation';
import { mixinDialogFormParent } from '@/mixin/dialog/FormParent';
import { mixinAccess } from '@/mixin/Access';
import { mixinTabPage } from '@/mixin/tab/Page';
import dialogForm from './Edit.vue';
import doorTraffic from './DoorTraffic.vue';
@Component({
    mixins: [
        mixinTableStore,
        mixinTableHeader,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinAccess,
        mixinTabPage
    ],
    components: {
       dialogForm, doorTraffic
    }
})
export default class parkParamTable extends Vue {
    @Action('parkParkset/list') getList: any;
    @Action('parkParkset/del') itemDel: any;
    @State((state) => state.sharing.parkSetItem) parkSetItemData: any;
    @State((state) => state.sharing.doorGysCode) doorGysCodeData: any;
    infoData: any = {};
    editInit({ data }) {
        const me = this as any;
        me.infoData = data;
        me.lodaByDefaultParams({ yard_sn: data.yard_sn });
    }

    dataStore: any = {
        proxy: {
            autoLoad: false
        }
    };
    table: any = {
        btns: [
            {
                label: '设置',
                param: 'doorTraffic',
                condition: [
                    function ({ row }) {
                        return row.param_code == '1000';
                    }],
                handleClick: (this as any).onEditClick
            },
            {
                label: '删除',
                handleClick: (this as any).onDelClick
            }
        ],
        // 列配置
        columns: [
            {
                width: 70,
                type: 'seq',
                title: '序号'
            },
            {
                title: '配置项Code',
                field: 'param_code'
            },
            {
                title: '配置项名称',
                field: 'param_code',
                params: 'parkSetItemData',
                formatter: (this as any).formatterData
            },
            {
                title: '配置项状态',
                field: 'status',
                formatter: function ({ cellValue }) {
                    return ['', '启用', '停用'][cellValue];
                },
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.status];
                }
            },
            {
                title: '创建时间',
                field: 'created_at'
            },
            {
                slots: { default: 'operate' },
                title: '操作',
                field: 'operate',
                width: 260
            }
        ]
    };
    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                field: 'param_code',
                label: '配置项code'
            }
        ]
    };
</script>
